<template>
  <div>
    <!-- 追加库位 -->
    <el-dialog
      width="1000px"
      title="追加库位"
      destroy-on-close
      append-to-body
      :visible.sync="show"
      :before-close="cancel"
    >
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
        <!-- 库位 -->
        <el-form-item :label="$t('库位号')">
          <el-input clearable v-model="queryParams.spNo" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">
            {{ $t('搜索') }}
          </el-button>
        </el-form-item>
      </el-form>
      <el-table
        :height="calTableHeight() - 150"
        ref="TableRef"
        :data="tableData"
        @selection-change="(rows) => (tableCheck = rows)"
      >
        <el-table-column type="selection" align="center" />

        <!-- 库位号 -->
        <el-table-column show-overflow-tooltip prop="spNo" :label="$t('库位号')" align="center" />
        <el-table-column :label="$t('sku')" align="center" prop="skuNo" />
        <el-table-column :label="$t('图片')" align="center" prop="spNo">
          <template #default="{ row }">
            <el-image
              fit="contain"
              style="width: 50px; height: 50px"
              :key="Math.random()"
              v-hover="row.imgUrl"
              :src="row.imgUrl + '?x-oss-process=image/resize,w_100/quality,q_70'"
            />
          </template>
        </el-table-column>
        <el-table-column :label="$t('库存')" align="center" prop="totalNum" />
      </el-table>
      <pagination
        v-show="pageTotal > 0"
        :total="pageTotal"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">
          <!-- 关闭 -->
          {{ $t('关闭') }}
        </el-button>
        <el-button @click="handleSubmit" type="primary">
          <!-- 确认 -->
          {{ $t('确定') }}
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getStockPositionList, appendPositionNo } from '@/api/distribution/sku/Inventory'
export default {
  activated() {
    this.$nextTick(() => this.$refs['TableRef']?.doLayout())
  },
  props: {
    /**
     * checkId
     */
    checkId: {
      type: [String, Number],
      required: true,
    },
    /**
     * 控制显示隐藏
     */
    show: {
      type: Boolean,
      required: true,
      default: false,
    },
  },
  data() {
    return {
      pageTotal: 0,
      tableCheck: [],
      tableData: [],
      queryParams: {
        pageNum: 0,
        pageSize: 10,
      },
    }
  },
  watch: {
    show: function (newValue) {
      if (newValue) {
        this.getList()
      }
    },
  },
  methods: {
    getList() {
      getStockPositionList(this.queryParams).then((res) => {
        this.tableData = res.rows
        this.pageTotal = res.total
      })
    },
    handleSubmit() {
      const tableCheck = this.tableCheck.map((i) => i.id)
      if (tableCheck.length == 0) {
        return this.$message.error(this.$t('请选择'))
      }

      appendPositionNo(this.checkId, tableCheck.toString()).then((res) => {
        const { code, msg } = res
        if (code === 200) {
          this.$message({ type: 'success', message: msg })
          this.cancel()
          this.$emit('close')
        }
      })
    },
    cancel() {
      this.$emit('update:show', false)
    },
  },
}
</script>
<style scoped lang="scss"></style>
